<template>
  <div>
    <el-card class="mb-5">
      <template #header>基本表单</template>
      <myInput :fieldList="fieldList" :model="model" @submit="handleBaseSubmit">
        <!-- 如果不使用默认的按钮可以使用插槽自定义内容， 插槽返回的model就是当前表单的数据 -->
        <!-- <template #buttons="{ model }">
                    <el-button">提交</el-button>
        </template>-->
      </myInput>
    </el-card>
  </div>
</template>    
<script setup>
import myInput from "./myInput.vue";
import { ref } from "vue";
const fieldList = ref([
  { label: "姓名", field: "name", disabled: true, col: 12 },
  {
    label: "性别",
    field: "gender",
    type: "radio",
    col: 12,
    options: {
      data: [
        { label: "男", value: 1 },
        { label: "女", value: 0 }
      ]
    }
  },
  {
    label: "爱好",
    field: "hobbies",
    type: "checkbox",
    col: 12,
    options: {
      data: [
        { label: "吃饭", value: 1 },
        { label: "睡觉", value: 2 },
        { label: "写代码", value: 3 }
      ]
    }
  },
  {
    label: "工作",
    field: "job",
    col: 12,
    type: "select",
    options: {
      data: [
        { label: "吃饭", value: 1 },
        { label: "睡觉", value: 2 },
        { label: "写代码", value: 3 }
      ]
    }
  },
  {
    label: "密码",
    field: "password",
    type: "password",
    col: 12,
    placeholder: "这是一个密码输入框"
  },
  {
    label: "只读",
    field: "readonly",
    col: 12,
    readonly: true,
    placeholder: "这是一个只读输入框"
  },
  {
    label: "留言板",
    field: "summary",
    type: "textarea",
    placeholder: "留言板",
    col: 24
  }
]);

const model = ref({
  name: "张三",
  gender: 1,
  hobbies: [1],
  job: 3,
  readonly: "只读输入框",
  summary: "尤雨溪懂个锤子vue是什么梗"
});
/**
 * 注意： model数据模型非必填项，如果仅仅是用于数据收集，model参数可以不用填，表单的submit事件会返回所有搜集的数据对象
 *       如果是编辑的情况下，页面需要回显数据，则model数据模型必须要填写
 */
const handleBaseSubmit = model => {
  console.log(model);
};
</script>